import Image from "next/image"
import { Button } from "@nextui-org/react"
function CaseItems({item,index}){
    return (
        <div className="cooparate_item inline-block relative ml-[76px] w-[300px] h-[150px]" key={index}>
            <Image src={item.img} alt={item.title} width={300} height={150}/>
            <div className="cooparate_text absolute flex top-0 left-0 justify-center items-center w-full h-full text-[#ffffff] text-[32px]">{item.title}</div>
        </div>
    )
}
export default function CooperateCase({ list }){
    const items = list.splice(0,list.length / 2 - 1)
    const secondItems = list.splice(-(list.length / 2 + 1))
    console.log('items', items)
    console.log('secondItems', secondItems)
    return (
        <div className="cooparate-case">
            <div className="cooparate_container w-screen overflow-hidden whitespace-nowrap relative background-100 py-[54px]">
                <div className="scrollWrapper inline-block">
                    {
                        // items.map((item,index)=>(CaseItems(item,index)))
                        items.map((item,index)=><CaseItems key={index} item={item} index={index}/>)
                    }
                </div>
                <div className="scrollWrapper inline-block">
                    {
                        items.map((item,index)=><CaseItems key={index} item={item} index={index}/>)
                    }
                </div>
            </div>
            <div className="cooparate_container w-screen overflow-hidden whitespace-nowrap relative background-100 pb-[54px]  pl-[109px]">
                <div className="scrollWrapper inline-block">
                    {
                        secondItems.map((item,index)=><CaseItems key={index} item={item} index={index}/>)
                    }
                </div>
                <div className="scrollWrapper inline-block">
                    {
                        secondItems.map((item,index)=><CaseItems key={index} item={item} index={index}/>)
                    }
                </div>
            </div>
            <div className="button_group flex justify-center mt-[59px]">
                <Button color="primary" radius="full" size="lg" className="px-[56px] py-[16px] text-[28px] leading-none h-auto">去试试</Button>
            </div>
        </div>
    )
}